<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style scoped="scoped">
        .router-link-active {
            color: red
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 
        A
        B
        C
        D
     -->
        <!-- <ul>
        <li><a href="#/A">导航A</a></li>
        <li><a href="#/B">导航B</a></li>
        <li><a href="#/C">导航C</a></li>
        <li><a href="#/D">导航D</a></li>
    </ul> -->
        <ul>
            <router-link to="/A">导航A</router-link>
            <router-link to="/B">导航B</router-link>
            <router-link to="/C">导航C</router-link>
            <router-link to="/D">导航D</router-link>
        </ul>

        <router-view></router-view>
    </div>
    <!-- <div id="box">
    </div> -->
    <!-- 引入 -->
    <script src="./vue.js"></script>
    <script src="./vue-router.js"></script>
    <script>
        //    需求: 根据不同的标识去渲染不同的组件(html/css/js)

        // 准备好渲染的组件

        var aCom = {
            template: `<div>A组件的内容</div>`
        };
        var bCom = {
            template: `<div>B组件的内容</div>`
        };
        var cCom = {
            template: `<div>C组件的内容</div>`
        };
        var dCom = {
            template: `<div>D组件的内容</div>`
        };
        // 路由部分
        // vue-router
        // router-link
        // router-view
        // 实例化router对象
        var router = new VueRouter({
            // 配置路由
            routes: [{
                path: '/A',
                component: aCom
            }, {
                path: '/B',
                component: bCom
            }, {
                path: '/C',
                component: cCom
            }, {
                path: '/D',
                component: dCom
            }, ]
        });

        new Vue({
            el: '#app',
            // 选项router
            router: router
        });
    </script>
</body>

</html>






<!-- 
    vue-router是vue插件
    spa项目要用前端路由
    vue开发spa项目
    vue-router插件帮我们实现路由功能
 -->